<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/2
  Time: 8:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目的根路径
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>医生界面</title>
    <!-- jquery -->
    <script type="text/javascript" src="<%=basePath%>static/jquery/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="<%=basePath%>static/swee/sweetalert.css">
    <script src="<%=basePath%>static/swee/sweetalert-dev.js"></script>
    <link rel="stylesheet" href="<%=basePath%>static/layui-v2.6.5/layui/css/layui.css">
    <script type="text/javascript" src="<%=basePath%>static/layui-v2.6.5/layui/layui.js"></script>
    <script src="<%=basePath%>static/jquery/vue.js" charset="UTF-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="<%=basePath%>static/doctor/js/doctorImprove.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="<%=basePath%>static/doctor/css/doctorImprove.css" charset=“utf-8”>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="app">

    <div class="layui-btn-container" style="float: left;font-size:15px;border: 3px solid lightseagreen;width: 520px; height: 700px">
        <button class="layui-btn demo" data-type="test8" style="width: 520px;height: 50px" id="jiuzhengQueue">就诊列表
        </button>
        <template>

        <el-tabs v-model="activeName" type="border-card"  @tab-click="zhengduanjieguo">
            <el-tab-pane label="未诊断" name="first">
                <div style="overflow: scroll;width: 520px;height: 520px;">
                    <c:choose>
                        <c:when test="${userQueueList.size()>0}">
                            <table class="jiezheng">
                                <c:forEach items="${userQueueList}" var="user">
                                    <tr>
                                        <td>${user.patientId}</td>
                                        <td>${user.patientName}</td>
                                        <td style="display: none">${user.time}</td>
                                        <td>
                                            <span class="jiuzheng"><button
                                                    class="layui-btn layui-btn-radius ">就诊</button></span>
                                            <span><button class="layui-btn layui-btn-radius "
                                                          onclick="userinfo(${user.patientId})">信息</button></span>
                                            <span><button class="layui-btn layui-btn-radius "
                                                          onclick="userMedical(${user.patientId})">病史</button></span>
                                            <span class="quxiao"><button class="layui-btn layui-btn-radius">取消</button></span>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </c:when>
                        <c:otherwise>
                            <div>
                                <h2 style="text-align: center">目前没有患者列表</h2>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已诊断" name="second">
                <div style="overflow: scroll;width: 520px;height: 520px ; font-size: 15px ">
                    <template>
                        <el-table
                                :data="userQueueList2.filter(data => !search3 || data.patientName.toLowerCase().includes(search3.toLowerCase()))"
                        >
                            <el-table-column
                                    label="患者卡号"
                                    min-width="28px"
                                    prop="patientId">
                            </el-table-column>
                            <el-table-column
                                    label="患者姓名"
                                    min-width="28px"
                                    prop="patientName">
                            </el-table-column>
                            <el-table-column
                                    label="挂号时间"
                                    min-width="52px"
                                    prop="time">
                            </el-table-column>
                            <el-table-column
                                    align="right">
                                <template slot="header" slot-scope="scope">
                                    <el-input
                                            v-model="search3"
                                            size="mini"
                                            placeholder="输入关键字搜索"/>
                                </template>
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit2(scope.$index, scope.row)">信息</el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete2(scope.$index, scope.row)">病史</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-tab-pane>
            <el-tab-pane label="历史诊断结果" name="third">
                <div>
                    <template>
                        <el-table
                                :data="resultsData.filter(data => !search2 || data.patientName.toLowerCase().includes(search2.toLowerCase()))"
                        >
                            <el-table-column
                                    label="患者卡号"
                                    prop="patientId">
                            </el-table-column>
                            <el-table-column
                                    label="患者姓名"
                                    prop="patientName">
                            </el-table-column>
                            <el-table-column
                                    label="检查时间"
                                    prop="time">
                            </el-table-column>
                            <el-table-column
                                    label="诊断结果"
                                    prop="results">
                            </el-table-column>
                            <el-table-column
                                    label="医嘱"
                                    prop="advice">
                            </el-table-column>
                            <el-table-column
                                    align="right">
                                <template slot="header" slot-scope="scope">
                                    <el-input
                                            v-model="search2"
                                            size="mini"
                                            placeholder="输入关键字搜索"/>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-tab-pane>
            <el-tab-pane label="" name="fourth"><div></div></el-tab-pane>
        </el-tabs>
        </template>
    </div>

    <%--    医生开药界面--%>
    <div style="float: left; width: 720px; height: 100%  ;border: 3px solid lightseagreen; border-left: none ">
        <div class="kaiyao" style="width: 720px">
            <h1 class="chufaye">长沙市华子医院门诊处方笺</h1>
        </div>
        <div>
            <form>
                <table class="chufaye-table">
                    <tr>
                        <td>诊疗卡号：<input type="text" name="patientId" id="patientId" style="width: 60px" readonly></td>
                        <td>用户姓名：<input type="text" name="patientName" id="patientName" style="width: 80px" readonly></td>
                        <td>挂号时间：<input type="text" name="patientName" id="time" readonly></td>
                    </tr>
                    <br>
                    <tr style="padding-top: 20px">
                        <td>
                            时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间 ：<input type="text" id="myclock"
                                                                     readonly>
                        </td>
                        <td>
                            诊断结果 ： <input type="text" name="" v-model="patientDiagnosisResults">
                        </td>
                    </tr>
                </table>
            </form>
        </div>


        <%--        开药列表--%>
        <div class="queuebigdiv">
            <div style="width: 720px;height: 362px;overflow: scroll">
                <table class="kaiyaoqueue" style="width: 710px;">
                    <tr>
                        <th>序号</th>
                        <th>药品名</th>
                        <th>数量</th>
                        <th>单位</th>
                        <th>用法用量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(items,index) in drugAllList" style="text-align: center;" v-if="drugAllList.length!=0">
                        <td>{{index+1}}</td>
                        <td>{{items.drugname}}</td>
                        <td>
                            <el-input-number v-model="items.sum" size="mini" controls-position="right"  :min="1" :max="54"></el-input-number>
                        </td>
                        <td>
                            <input type="text" v-model="items.danwei" style="width: 30px;   border: none;
    border-bottom: 1.5px solid #009f95;" readonly>
                        </td>
                        <td>
                            <input type="text" v-model="items.yongfang" style="width: 120px;   border: none;
    border-bottom: 1.5px solid #009f95;">
                        </td>
                        <td>
                            <el-row>
                                <el-button type="danger" @click.prevent="del(index)" icon="el-icon-delete" circle></el-button>
<%--                                <el-button type="danger" @click.prevent="del(index)" plain>危险按钮</el-button>--%>
                            </el-row>
<%--                            <a href="#" @click.prevent="del(index)" style="color: red">删除</a>--%>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <button class="layui-btn" style="margin-left: 520px" @click="affirmKaiYao()">开药</button>
                <button class="layui-btn"  @click="KaiYao()">确认开药</button>
            </div>
        </div>
        <%--        --%>
        <div class="layui-btn-container">
            <button class="layui-btn" @click="showKaiYao()">开具检查单</button>
            <button class="layui-btn" @click="showJC()">查询过往检查单记录</button>
            <button class="layui-btn" @click="dakaiYiZhu()">编写医嘱</button>
        </div>
    </div>
    <%--    开具ct检查单盒子--%>
    <el-dialog title="检查单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="卡号" :label-width="formLabelWidth">
                <el-input v-model="form.cardNumber" autocomplete="off" readonly style="width: 250px;"></el-input>
            </el-form-item>
            <el-form-item label="患者姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" readonly style="width: 250px;"></el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择" @change="typeXuanZen()">
                    <el-option label="CT" value="CT"></el-option>
                    <el-option label="核磁共振" value="核磁共振"></el-option>
                    <el-option label="B超" value="B超"></el-option>
                    <el-option label="彩超" value="彩超"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="检查部位" :label-width="formLabelWidth">
                <el-select v-model="form.part" placeholder="请选择" >
                    <el-option  v-for="item in buweiList3" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cloneKaiYao()">取 消</el-button>
            <el-button type="primary" @click="verifyHezi()">确 定</el-button>
        </div>
    </el-dialog>

    <%--    医嘱--%>
    <el-dialog title="医嘱" :visible.sync="dialogFormVisible2">
        <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea">
        </el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2=false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible2=false">确 定</el-button>
        </div>
    </el-dialog>
<%--    开药盒子--%>
    <el-drawer
            title="开药"

            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose" >
        <el-table
                :data="drugList2.filter(data => !search || data.drugname.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100% ;font-size: 15px">
            <el-table-column
                    label="编号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="药品名"
                    prop="drugname">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click.once="handleEdit(scope.$index, scope.row)">+</el-button>
                    <el-button
                            size="mini"
                            @click="handleDelete(scope.$index, scope.row)">-</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-drawer>

<%--    检查记录--%>
    <el-dialog title="检查记录查询" :visible.sync="dialogFormVisibleJianChan">
        <el-table :data="gridData">
            <el-table-column property="checkType" label="检查类型" width="150"></el-table-column>
            <el-table-column property="cTime" label="检查时间" width="200"></el-table-column>
            <el-table-column property="inspectionItem" label="检查部位"></el-table-column>
            <el-table-column property="diagnose" label="检查结果"></el-table-column>
            <el-table-column property="doctor_information.doctorname" label="检查医生"></el-table-column>
        </el-table>
    </el-dialog>
    <%--    患者病史--%>
    <el-dialog title="患者病史" :visible.sync="huanzheBS">
        <el-table :data="Medical">
            <el-table-column property="diagnosedate" label="检查时间" width="150"></el-table-column>
            <el-table-column property="usertype" label="类型" width="200"></el-table-column>
            <el-table-column property="doctor_information.doctorname" label="看病医生"></el-table-column>
        </el-table>
    </el-dialog>
</div>

</body>
</html>
<script type="text/javascript">
    let vue = new Vue({
        el: "#app",
        data() {
            return {
                //诊断结果
                patientDiagnosisResults:'',
                //点击切换
                activeName: 'first',
                //医嘱
                textarea: '',
                dialogVisible: false,
                dialogFormVisibleJianChan:false,
                huanzheBS:false,
                dialogFormVisible2: false,
                dialogFormVisible: false,
                //患者病史
                Medical:[{diagnosedate:"2021-04-30 11:18:57",usertype:"感冒",doctor_information:{doctorname:"汪渣渣"}}],
                //已诊断列表
                userQueueList2:[{id:1,patientId:"60001",patientName:"汪成功",doctorName:"杨反则",time:"2021-11-23",state:2}],
                //诊断结果查询
                resultsData:[{patientId:60001,patientName:"汪成功",time:"2021-11-17",results:"脑癌",advice:"多喝热水"}],
                //用户信息
                userInfo:[],
                buweiList:[
                    {id:1,name:"头部"},{id:2,name:"颈部"},{id:3,name:"胸部"},
                    {id:4,name: "背部"},{id:5,name:"肩部"},{id:6,name:"上臂"},
                    {id:7,name:"前臂"},{id:8,name:"手"},{id:9,name:"臀部"},
                    {id:10,name:"大腿"},{id:11,name:"小腿"},{id:12,name:"足"}, {id:13,name: "脊椎"}],
                buweiList2:[{id:1,name:"胸部"}],
                buweiList3:[],
                gridData: [{
                    id:1,
                    doctorid:1,
                    checkType: 'CT',
                    cdiagnoseNO:"60001",
                    cuserName:"汪汪汪",
                    cTime: '2016-05-02',
                    inspectionItem: '上海市普陀区金沙江路 1518 弄',
                    diagnose:"无",
                    doctor_information:{
                        doctorname:"鸡"
                    }}],
                gridData2:[],
                form: {
                    cardNumber: '',
                    name: '',
                    region: '',//下拉列表
                    part:''
                },
                formLabelWidth: '120px',
                drawer: false,
                direction: 'ltr',
                drugList:[],
                drugList2:[
                    {id:1,drugname:"人参",utils:""},{id:2,drugname:"人参",utils:""}, {id:3,drugname:"人参",utils:""}
                ],
                search: '',
                search2:'',
                search3:'',
                drugAllList:[]
            }
        },
        created(){
            <%--console.log(${userQueueList2});--%>
            //页面一加载就把所有药品查出来
            $.ajax({
                url:"/doctory/selectAllDrug",
                type: "get",
                datatype: "json",
                success:  (data)=> {
                    this.drugList=data;
                    console.log(data);
                    this.drugList2=this.drugList;
                    for(var i=0;i<this.drugList2.length;i++){
                        this.$set(this.drugList2[i],'id',this.drugList[i].id);
                        this.$set(this.drugList2[i],'drugname',this.drugList[i].drugname);
                        this.$set(this.drugList2[i],'utils',this.drugList[i].utils);
                    }
                    console.log(this.drugList2);
                }
            });
        },
        methods: {
            //更新下拉框选项
            typeXuanZen(){
              if(this.form.region=="B超" || this.form.region=="彩超"){
                  this.buweiList3=this.buweiList2;
              }else {
                  this.buweiList3=this.buweiList;
              }
            },
            //开药
            affirmKaiYao() {
                let patientId = $("#patientId").val();
                if (patientId.length == 0) {
                    this.$message({
                        message: '当前没有患者处于问诊状态',
                        type: 'warning'
                    });
                }else {
                    this.drawer=true;
                }
            },
            //查询过往检查记录
            showJC(){
                let patientId = $("#patientId").val();
                if (patientId.length == 0) {
                    this.$message({
                        message: '当前没有患者处于问诊状态',
                        type: 'warning'
                    });
                }else {
                    $.ajax({
                        url:"/doctory/selectInspectionRecord",
                        type: "post",
                        data: {
                            CdiagnoseNO: $("#patientId").val()
                        },
                        datatype: "json",
                        success:  (data)=> {
                            this.gridData2=data;
                            this.gridData=this.gridData2;
                            for(var i=0;i<this.gridData2.length;i++){
                                this.$set(this.gridData[i],'checkType',this.gridData2[i].checkType);
                                this.$set(this.gridData[i],'cTime',this.gridData2[i].cTime);
                                this.$set(this.gridData[i],'inspectionItem',this.gridData2[i].inspectionItem);
                                this.$set(this.gridData[i],'diagnose',this.gridData2[i].diagnose);
                                this.$set(this.gridData[i].doctor_information,'doctorname',this.gridData2[i].doctor_information.doctorname);
                                console.log(this.gridData2[i].cTime)
                            }
                        }
                    });
                    this.dialogFormVisibleJianChan=true;
                }
            },
            //打开开具检查
            showKaiYao() {
                let patientId = $("#patientId").val();
                if (patientId.length == 0) {
                    this.$message({
                        message: '当前没有患者处于问诊状态',
                        type: 'warning'
                    });
                } else {
                    this.dialogFormVisible = true;
                    this.form.name = $("#patientName").val();
                    this.form.cardNumber = $("#patientId").val();
                }
            },
            //关闭检查单盒子
            cloneKaiYao() {
                this.dialogFormVisible = false;
            },
            //打开医嘱
            dakaiYiZhu() {
                let patientId = $("#patientId").val();
                if (patientId.length == 0) {
                    this.$message({
                        message: '当前没有患者处于问诊状态',
                        type: 'warning'
                    });
                } else {
                    this.dialogFormVisible2 = true;
                }
            },
            //点击检查盒子触认的操作
            verifyHezi() {
                //开具检查单时先查一遍看有没有重要开具
                $.ajax({
                    url:"/doctory/InspectionRecord",
                    type: "post",
                    data: {
                            userid: $("#patientId").val(),
                            userTime: $("#myclock").val(),
                            uderType: this.form.region,
                            userMeney: 300,
                            state: 0,
                            usercheck:this.form.part
                    },
                    datatype: "json",
                    success: function (data) {
                        swal(data);
                    }
                });
                this.dialogFormVisible = false
            },
            //关闭弹屉
            handleClose(done) {
                done();
            },
           //这里是已诊断列表的查询
            //用户病史
            handleDelete2(index, row) {
                console.log(index);
                console.log(row.patientId);
                let patientId=row.patientId;
                $.ajax({
                    url:urlAll+"/doctory/selectMedical",
                    type:"post",
                    data:{
                        patientId:patientId
                    },
                    datatype:"json",
                    success:  (data)=>{
                        console.log(data);
                        this.Medical=data;
                    }
                });
                this.huanzheBS=true;
            },
            //用户信息
            handleEdit2(index, row) {
                console.log(index);
                console.log(row.patientId);
                $.ajax({
                    url:urlAll+"/doctory/selectUserInfo",
                    type:"post",
                    data:{
                        patientId:row.patientId
                    },
                    datatype:"json",
                    success: function (data){
                        this.userInfo=data;

                        let strs=`姓名：`+this.userInfo.name+` &nbsp; &nbsp;`+
                                  `性别：`+this.userInfo.sex+`&nbsp; &nbsp;`+
                                 `电话：`+this.userInfo.phone+`&nbsp; &nbsp`+
                                 `年龄：`+this.userInfo.age+`&nbsp; &nbsp;`+
                                 `身份证号：：`+this.userInfo.idCard+` &nbsp; &nbsp;`+
                                 `余额：`+this.userInfo.money+` &nbsp; &nbsp;`;
                        swal({
                            title: "患者信息",
                            text: strs,
                            showCancelButton: true,
                            confirmButtonText: "确认",
                            closeOnConfirm: false,
                            closeOnCancel: false,
                            cancelButtonText: "取消",
                            html: true     //true：表示写的文本是html元素}
                        })
                    }
                });
            },
            //点击开药盒子中的+号触发的事件
            handleEdit(index, row) {
                console.log(index, row);
                console.log(row.drugname);
                const drug={
                    drugid:row.id,
                    drugname:row.drugname,
                    sum:1,
                    danwei:row.utils,
                    yongfang:"一天三次"
                }
                console.log(drug);
                this.drugAllList.push(drug);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            //删除药品
            del(id){
                this.drugAllList.splice(id,1);
            },
            //确认开药
            KaiYao(){
                let patientId = $("#patientId").val();
                if (patientId.length == 0) {
                    this.$message({
                        message: '当前没有患者处于问诊状态',
                        type: 'warning'
                    });
                }else if(this.drugAllList.length==0){
                    this.$message({
                        message: '当前并没加入药单',
                        type: 'warning'
                    });
                }else if(this.textarea.length==0){
                    this.$message({
                        message: '请编写医嘱哦',
                        type: 'warning'
                    });
                }else if(this.patientDiagnosisResults.length==0){
                    this.$message({
                        message: '请编写诊断结果',
                        type: 'warning'
                    });
                }else {
                    //prescribe  请求开药接口
                    $.ajax({
                        url:"/doctory/prescribe",
                        type: "post",
                        data:{
                            patientId: $("#patientId").val(),
                            time:$("#time").val(),
                            time2:$("#myclock").val(),
                            patientName: $("#patientName").val(),
                            list:JSON.stringify(this.drugAllList),
                            patientDiagnosisResults:this.patientDiagnosisResults,
                            textarea:this.textarea
                        },
                        datatype: "json",
                        success:  (data)=> {
                            if(data){
                                swal({
                                    title: "开药成功",
                                    type:"success",
                                    showCancelButton: true,
                                    confirmButtonText: "确认",
                                    closeOnConfirm: false,
                                    closeOnCancel: false,
                                    cancelButtonText: "取消",
                                },function (data) {
                                    location.reload();
                                })
                            }else {
                                this.$message({
                                    message: '系统繁忙',
                                    type: 'warning'
                                });
                            }
                        }
                    });
                }
            },
            //查询历史诊断结果
            zhengduanjieguo(tab, event){
                // alert(this.activeName);
                if(this.activeName=="second"){
                    $.ajax({
                        url:"/doctory/selectDoctorImproveList",
                        type: "post",
                        datatype: "json",
                        success:  (data)=> {
                            this.userQueueList2=data;
                            console.log(this.userQueueList2)
                        }
                    })

                }
               if(this.activeName=="third"){
                   $.ajax({
                       url:"/doctory/selectRecords",
                       type: "post",
                       datatype: "json",
                       success:  (data)=> {
                           this.resultsData=data;
                       }
                   })
               }

            }
        }
    });
</script>
<style>
    .el-table th.el-table__cell>.cell{
        font-size: 12px;
    }
    .el-table td.el-table__cell div{
        font-size: 12px;
    }
    .el-table .el-table__cell{
        padding: 2px;
    }
</style>